<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="/lib/layui/css/layui.css" />
    <link rel="stylesheet" href="/lib/cropper/cropper.css" />
    <link rel="stylesheet" href="/css/public.css" />
    <style>
      .publicdiv{
        padding: 0;
      }
      body>div{
        background-color: white;
      }
      /* 设置卡片主体区域的宽度 */
      .layui-card-body {
        width: 500px;
      }

      /* 设置按钮行的样式 */
      .row2 {
        display: flex;
        justify-content: flex-end;
        margin-top: 20px;
      }

      /* 设置裁剪区域的样式 */
      .cropper-box {
        width: 350px;
        height: 350px;
        background-color: cyan;
        overflow: hidden;
      }

      /* 设置第一个预览区域的样式 */
      .w100 {
        width: 100px;
        height: 100px;
        background-color: gray;
      }

      /* 设置第二个预览区域的样式 */
      .w50 {
        width: 50px;
        height: 50px;
        background-color: gray;
        margin-top: 50px;
      }

      /* 设置预览区域下方文本的样式 */
      .size {
        font-size: 12px;
        color: gray;
        text-align: center;
      }

      /* 设置图片行的样式 */
      .row1 {
        display: flex;
      }

      /* 设置 preview-box 区域的的样式 */
      .preview-box {
        display: flex;
        flex-direction: column;
        flex: 1;
        align-items: center;
      }

      /* 设置 img-preview 区域的样式 */
      .img-preview {
        overflow: hidden;
        border-radius: 50%;
      }
    </style>
  </head>
  <body>
    <div>
      <div class="layui-card-header">更换头像</div>
      <div class="publicdiv" style="width: 100%;">
        <form class="layui-card-body layui-form" action="" lay-filter="usermsg">
          <div class="row1">
            <!-- 图片裁剪区域 -->
            <div class="cropper-box">
              <!-- 这个 img 标签很重要，将来会把它初始化为裁剪区域 -->
              <img id="image" src="/images/sample.jpg" />
            </div>
            <!-- 图片的预览区域 -->
            <div class="preview-box">
              <div>
                <!-- 宽高为 100px 的预览区域 -->
                <div class="img-preview w100"></div>
                <p class="size">100 x 100</p>
              </div>
              <div>
                <!-- 宽高为 50px 的预览区域 -->
                <div class="img-preview w50"></div>
                <p class="size">50 x 50</p>
              </div>
            </div>
          </div>
  
          <!-- 第二行的按钮区域 -->
          <div class="row2">
            <input type="file" id="file" style="display: none" />
            <button type="button" class="layui-btn">上传</button>
            <button type="button" class="layui-btn layui-btn-danger">确定</button>
          </div>
        </form>
      </div>
    </div>

    <script src="/lib/jquery.js"></script>
    <script src="/lib/cropper/Cropper.js"></script>
    <script src="/lib/cropper/jquery-cropper.js"></script>
    <script src="/lib/layui/layui.all.js"></script>
    <script src="/js/setAjax.js"></script>
    <script>
      // 1.1 获取裁剪区域的 DOM 元素
      var $image = $("#image");

      // 1.2 配置选项
      const options = {
        // 纵横比
        aspectRatio: 1,
        // 指定预览区域
        preview: ".img-preview",
      };

      // 1.3 创建裁剪区域
      $image.cropper(options);

      $("button:contains('上传')").on("click", function () {
        $("#file").click();
      });

      $("#file").on("change", function () {
        let fileobj = this.files[0];
        let url = URL.createObjectURL(fileobj);
        $image.cropper("destroy").attr("src", url).cropper(options);
      });

      $("button:contains('确定')").on("click", function () {
        let dataURL = $image
          .cropper("getCroppedCanvas", {
            width: 100,
            height: 100,
          })
          .toDataURL("image/png");

        $.ajax({
          type: "post",
          url: "/my/update/avatar",
          data: {
            avatar: dataURL,
          },
          success: function (res) {
            layer.msg(res.message);
            if (res.status === 0) {
              window.parent.getUserInfo();
            } else {
              layer.msg(res.message);
            }
          },
        });
      });
    </script>
  </body>
</html>
